<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>购物车</title>
		<link rel="stylesheet" type="text/css" href="css/cart.css"/>
	</head>
	<body>
		<div class="oneplus">
			<!--头部-->
			<header class="web">
				<div class="header_box">
		             <div class="logo">
		             	<a href="http://www.oneplus.cn">
		             		<img src="img/logo.png"/>
		             	</a>
		             </div>
		             <div class="title">
		             	<div class="title_text">
		             		<ul>
		             			<li>
		             				<a href="http://www.oneplus.cn/5t" class="text">OnePlus 5T <i></i></a>
		             			</li>
		             			<li>
		             				<a href="http://store.oneplus.cn" class="text">商城 <i></i></a>
		             			</li>
								<li>
		             				<a href="http://service.oneplus.cn" class="text">服务 <i></i></a>
		             			</li>
								<li>
		             				<a href="http://pr.oneplus.cn" class="text">博客 <i></i></a>
			             		</li>
			             		<li>
		             				<a href="http://www.oneplusbbs.com" class="text">论坛 <i></i></a>
		             			</li>
		             		</ul>
		             	</div>
		             </div>
		             <div class="box_right">
		             	<div class="i_search">
		             		<a href="#">
		             			<span></span>
		             		</a>
		             	</div>
		             	<div class="i_cart">
		             		<a href="#">
		             			<span></span>
		             		</a>
		             	</div>
		             	<div class="i_user">
		             		<a href="login.html">
		             			<span></span>
		             		</a>
		             	</div>
		             </div> 
	             </div>
			</header>
			<!--内容-->
			<div class="content-cart">
				<div class="main-c">
					<div class="main-top">
						<div class="top-line">
							<span class="line-name name-1 is-on">购物车</span>
							<span class="line-name name-2">填写订单</span>
							<span class="line-name name-3">完成支付</span>
							<div class="red-line line-step1"></div>
							<span class="line-circular name-1 active"></span>
							<span class="line-circular name-2"></span>
							<span class="line-circular name-3"></span>
						</div>
					</div>
				</div>
				<div class="main-c">
					<div class="cartcontent">
							 <div class="goods-list">
							 	<ul class="goods-box">
							 		<li class="list-head">
							 			<ul class="head-caption clearfix">
							 				<li>
							 					<span>商品</span>
							 				</li>
							 				<li>价格</li>
							 				<li>数量</li>
							 				<li>小计</li>
							 				<li>操作</li>
							 			</ul>
							 		</li>
							 		<li class="list-body">
							 			<div class="main-goods">
							 				<ul class="cart-product clearfix">
							 					<li>
							 						<a href="http://store.oneplus.cn/products/P1100267" target="_blank">
							 							<img src="img/5t.png" class="goods-img" alt="OnePlus 5T 星辰黑 128G"/>
							 						</a>
							 						<span class="main-info">
							 							<a href="http://store.oneplus.cn/products/P1100267" target="_blank">OnePlus 5T 星辰黑 128G</a>
							 						</span>
							 					</li>
							 					<li class="price">
							 						<div>
							 							<p>¥ 3499.00</p>
							 						</div>
							 					</li>
							 					<li class="goods-number">
							 						<div class="goods-num">
							 							<span class="goods-minus disabled">
							 								<span> </span>
							 							</span>
							 							<span> 1 </span>
							 							<span class="goods-plus">
							 								<span> </span>
							 								<span> </span>
							 							</span>
							 						</div>
							 					</li>
							 					<li class="total-price">¥ 3499.00</li>
							 					<li class="delete-goods">
							 						<span class="delete-btn"></span>
							 					</li>
							 				</ul>
							 			</div>
							 		</li>
							 	</ul>
							 	<div class="total-panle clearfix">
					 					<div class="total-list">
					 						<div class="total-content">
					 							<p class="selected">已选择
					 							<span class="total-goods-num"> 1 </span>
					 							      件商品
					 							</p>
					 							<dl class="clearfix">
					 								<dt>购物车商品小计</dt>
					 								<dd class="all-price">¥ 3499.00</dd>
					 								<dt>运费</dt>
					 								<dd>¥ 0</dd>
					 							</dl>
					 							<dl class="amount clearfix">
					 								<dt> 总价 </dt>
					 								<dd class="amount-price"> ¥ 3499.00 </dd>
					 							</dl>
					 						</div>
					 						<div class="checkout-btn-bar clearfix">
					 							<a href="http://store.oneplus.cn" class="go-store-btn">继续购物</a>
					 							<a href="http://store.oneplus.cn/order/tocheckout" id="goorder">
					 								<span id="goorderbtn"> 去结算 </span>
					 							</a>
					 						</div>
											</div>
					 					</div>
					 			</div>
							</div>
						<!--服务-->
					<div class="setion-bottom">
									<div class="bottom">
										<ul>
											<li>
												<a href="http://service.oneplus.cn/faq?knowledgeId=A300000227">
													<i class="bottom-7"></i>
													<span>7天无理由退货</span>
												</a>
											</li>
											<li>
												<a href="http://service.oneplus.cn/faq?knowledgeId=A300000228">
													<i class="bottom-15"></i>
													<span>15天退货保障</span>
												</a>
											</li>
											<li>
												<a href="http://service.oneplus.cn/faq?knowledgeId=A300000229">
													<i class="bottom-30"></i>
													<span>30天换货保障</span>
												</a>
											</li>
											<li>
												<a href="http://service.oneplus.cn/faq?knowledgeId=A100000031">
													<i class="bottom-99"></i>
													<span>99元全场包邮</span>
												</a>
											</li>
										</ul>
									</div>
								</div>
				</div>
				<div class="like-goods">
						    <p class="like-title">你可能喜欢</p>
						<div class="like-goods-list clearfix2">
							<div class="like-goods-box">
								<div class="like-content clear">
									<ul class="clearfix2 list-goods-ul">
										<li>
											<a href="http://store.oneplus.cn/products/P1100247" target="_blank">
												<img src="img/like1.png" class="link-img" alt="OnePlus 5T 个性保护壳 芳纶纤维"/>
											</a>
											<div class="name-price">
												<p class="goods-name">OnePlus 5T 个性保护壳 芳纶纤维</p>
												<p class="goods-price">¥149.00</p>
											</div>
											<div class="go-to-cart">
												<span>加入购物车</span>
											</div>
										</li>
										<li>
											<a href="http://store.oneplus.cn/products/P1100247" target="_blank">
												<img src="img/like2.png" class="link-img" alt="OnePlus 5T 个性保护壳 芳纶纤维"/>
											</a>
											<div class="name-price">
												<p class="goods-name">OnePlus 5T 个性保护壳 砂岩黑</p>
												<p class="goods-price">¥99.00</p>
											</div>
											<div class="go-to-cart">
												<span>加入购物车</span>
											</div>
										</li>
										<li>
											<a href="http://store.oneplus.cn/products/P1100247" target="_blank">
												<img src="img/like3.png" class="link-img" alt="OnePlus 5T 个性保护壳 芳纶纤维"/>
											</a>
											<div class="name-price">
												<p class="goods-name">OnePlus 5T 硅胶保护壳 红色</p>
												<p class="goods-price">¥129.00</p>
											</div>
											<div class="go-to-cart">
												<span>加入购物车</span>
											</div>
										</li>
										<li>
											<a href="http://store.oneplus.cn/products/P1100247" target="_blank">
												<img src="img/like4.png" class="link-img" alt="OnePlus 5T 个性保护壳 芳纶纤维"/>
											</a>
											<div class="name-price">
												<p class="goods-name">OnePlus 5T 3D钢化玻璃保护膜 黑色</p>
												<p class="goods-price">¥129.00</p>
											</div>
											<div class="go-to-cart">
												<span>加入购物车</span>
											</div>
										</li>
										<li>
											<a href="http://store.oneplus.cn/products/P1100247" target="_blank">
												<img src="img/like4.png" class="link-img" alt="OnePlus 5T 个性保护壳 芳纶纤维"/>
											</a>
											<div class="name-price">
												<p class="goods-name">OnePlus 5T 3D钢化玻璃保护膜 黑色</p>
												<p class="goods-price">¥129.00</p>
											</div>
											<div class="go-to-cart">
												<span>加入购物车</span>
											</div>
										</li>
									</ul>
								</div>
								<div class="bx-controls">
									<div class="bx-controls-direction">
										<a href="" class="bx-prev">Prev</a>
										<a href="" class="bx-next">Next</a>
									</div>
								</div>
							</div>
						</div>
					</div>
			</div>
			<!--尾部-->
			<footer>
				<div class="footer-link">
					<div class="footer-ul">
						<ul>
							<h2>一加产品</h2>
							<li><a href="http://www.oneplus.cn/5t">OnePlus 5T</a></li>
							<li><a href="http://www.oneplus.cn/product/oneplus5">OnePlus 5</a></li>
							<li><a href="http://www.oneplus.cn/product/oneplus3t">OnePlus 3T</a></li>
							<li><a href="http://www.oneplus.cn/product/oneplus3">OnePlus 3</a></li>
						</ul>
					</div>
					<div class="footer-ul">
						<ul>
							<h2>关于一加</h2>
							<li><a href="http://www.oneplus.cn/aboutus">了解一加</a></li>
							<li><a href="http://career.oneplus.cn">加入一加</a></li>
							<li><a href="http://www.h2os.com/">H2OS</a></li>
							
						</ul>
					</div>
					<div class="footer-ul">
						<ul>
							<h2>服务支持</h2>
							<li><a href="http://service.oneplus.cn/selfservice">自助服务</a></li>
							<li><a href="http://support.oneplus.cn/">技术支持</a></li>
							<li><a href="http://service.oneplus.cn/faq?categoryId=A1000029">售后服务</a></li>
							<li><a href="http://www.oneplus.cn/product/jiaduobao">一加加多保</a></li>
						</ul>
					</div>
					<div class="footer-kf">
						<h1>400-888-1111</h1>
						<a href="http://www.sobot.com/chat/pc/index.html?sysNum=8b1ffba807764bc3bf2da878e5bb3df6" target="_blank">在线客服</a>
						<div class="time">周一至周日 9:00 - 22:00</div>
					</div>
				</div>
				<div class="footer-bottom">
					<div class="bottom-text">
						<div class="flag">
							Change locations<a href=""><img src="img/flag.png"/></a>
						</div>
						<!--<div class="clear"></div>-->
						<div class="bottom-right">
							<span class="right-text">© 2013-2017  OnePlus. All Rights Reserved.  (粤ICP备13088308号-1)</span>
							<span class="cnnic">
								<a href="https://ss.knet.cn/verifyseal.dll?sn=e14063044030050707awmq000000&ct=df&a=1&pa=20151014">
									<img src="img/cnnic.png"/>
								</a>
							</span>
							<span class="record">
								<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44030402000178">
									<img src="img/record.png"/>粤公网安备 44030402000178号
								</a>
							</span>
						</div>
					</div>
				</div>
			</footer>
			<script src="js/jquery-1.11.0.js"></script>
			<script type="text/javascript" charset="utf-8">

					/**
		
					 * parallelRoll 左右无缝滚动
		
					 * boxName : 最外层盒子类名
		
					 * tagName : 滚动标签元素
		
					 * time : 滚动间隔时间
		
					 * direction : 滚动方向  right-->向右    left-->向左
		
					 * visual : 可视数
		
					 * prev : 上一张
		
					 * next : 下一张
		
					 * author : MR chen  370489175@qq.com
		
					 * Date: 15-03-19
		
					 * */
		
					(function($){
		
						$.fn.parallelRoll = function(options){
		
							var opts = $.extend({}, $.fn.parallelRoll.defaults, options);
		
							var _this = this;					
		
							var l = _this.find(opts.tagName).length;
		
							var autoRollTimer;
		
							var flag = true; // 防止用户快速多次点击上下按钮
		
							var arr = new Array();
		
							/**
		
							 * 如果当  (可视个数+滚动个数 >滚动元素个数)  时  为不出现空白停顿   将滚动元素再赋值一次
		
							 * 同时赋值以后的滚动元素个数是之前的两倍  2 * l.
		
							 * */
		
							if(opts.amount + opts.visual > l){
		
								_this[0].innerHTML += _this[0].innerHTML;
		
								l = 2 * l;
		
							}else{
		
								l = l;
		
							}					
		
							var w = $(opts.tagName).outerWidth(true); //计算元素的宽度  包括补白+边框
		
							_this.css({width: (l * w) + 'px'}); // 设置滚动层盒子的宽度
		
							return this.each(function(){
		
								_this.closest('.'+opts.boxName).hover(function(){							
		
									clearInterval(autoRollTimer);
		
								},function(){							
		
									switch (opts.direction){
		
										case 'left':
		
											autoRollTimer = setInterval(function(){
		
												left();
		
											},opts.time);
		
										break;
		
										case 'right':
		
											autoRollTimer = setInterval(function(){
		
												right();
		
											},opts.time);
		
										break;
		
										default : 
		
											alert('参数错误！');
		
										break;
		
									}							
		
								}).trigger('mouseleave');
		
								$('.'+opts.prev).on('click',function(){
		
									flag ? left() : "";
		
								});
		
								$('.'+opts.next).on('click',function(){
		
									flag ? right() : "";
		
								});
		
							});					
		
							function left(){
		
								flag = false;
		
								_this.animate({marginLeft : -(w*opts.amount)},1000,function(){
		
									_this.find(opts.tagName).slice(0,opts.amount).appendTo(_this);
		
									_this.css({marginLeft:0});
		
									flag = true;
		
								});
		
							};
		
							function right(){
		
								flag = false;
		
								arr = _this.find(opts.tagName).slice(-opts.amount);										
		
								for(var i = 0; i<opts.amount; i++){
		
									$(arr[i]).css({marginLeft : -w*(i+1)}).prependTo(_this);
		
								}										
		
								_this.animate({marginLeft : w*opts.amount},1000,function(){
		
									_this.find(opts.tagName).removeAttr('style');
		
									_this.css({marginLeft:0});
		
									flag = true;
		
								});
		
							};
		
						};
		
						//插件默认选项
		
					    $.fn.parallelRoll.defaults = {
		
					    	boxName : 'like-content',
		
					        tagName : 'li',
		
					        time : 3000,  // 
		
					        direction : 'right', // 滚动方向
		
					        visual : 4 , //可视数
		
					        prev : 'bx-prev',
		
					        next : 'bx-next',
		
					        amount : 1   // 滚动数  默认是1
		
					    };
		
					})(jQuery);
		
					
		
					$(document).ready(function(){
		
						$(".list-goods-ul").parallelRoll({
		
							amount : 2
		
						});				
		
					});
		</script>
		</div>
	</body>
</html>
